<template>
	<view class="big">
		<u-tabs
			:list="list"
			bar-height="4"
			inactive-color="#AAAAAA"
			bar-width="48"
			:bar-style="barStyle"
			active-color="#001B0A"
			:is-scroll="false"
			:current="current"
			@change="change"
			bg-color=""
		></u-tabs>
		<view v-show="current == 0">
			<view style="width: 100%;">
				<u-tabs
					:list="list1"
					bar-height="4"
					inactive-color="#AAAAAA"
					bar-width="48"
					:bar-style="barStyle1"
					:show-bar="false"
					active-color="#001B0A"
					:is-scroll="false"
					:current="current1"
					@change="change1"
					bg-color=""
				></u-tabs>
			</view>
			<tabs :orderList="orderList" :current1="current1"  @drawback='drawback'></tabs>
		</view>
		<history v-show="current == 1" :historyList='historyList'></history>
		<view class="hiatus">
			<view class="img">
				<image src="../../static/index/images/订单缺省页.png" mode=""></image>
				<text>您现在还没有订单</text>
			</view>
			<view class="button" @click="Recharge"><text>去商城看一看</text></view>
		</view>
	</view>
</template>

<script>
import { tabs } from '../../compontents/picker';
import { history } from '../../compontents/history';
import { orderIndex } from '@/api/api.js';
export default {
	components: {
		tabs,
		history
	},
	data() {
		return {
			list: [
				{
					name: '当前订单'
				},
				{
					name: '历史订单'
				}
			],
			current: 0,
			barStyle: {
				background: '#34E276'
			},
			list1: [
				{
					name: '全部订单'
				},
				{
					name: '待付款'
				},
				{
					name: '待发货'
				},
				{
					name: '待收货'
				}
			],
			current1: 2,
			barStyle1: {
				background: '#34E276'
			},
			orderList: [],
			historyList:[]
			// current1: null
		};
	},
	onLoad() {
		this.getindex();
	},
	methods: {
		change(index) {
			this.current = index;
			this.getindex();
		},
		change1(index) {
			this.current1 = index;
			this.getindex();
		},
		async getindex() {
			let type;
			if (this.current == 1) {
				type = 'all';
			} else {
				if (this.current1 == 0) {
					type = 'alls';
				} else if (this.current1 == 1) {
					type = 'nopay';
				} else if (this.current1 == 2) {
					type = 'nosend';
				} else if (this.current1 == 3) {
					type = 'noget';
				}
			}
			console.log(this.current, type);
			if (type == 'alls') {
				let res = await orderIndex({ type: type });
				if (res.code == 1) {
					this.orderList = res.data;
				}
			} else if (type == 'all') {
				let res = await orderIndex({ type: type });
				console.log(res);
				this.historyList = res.data;
			} else {
				let res = await orderIndex({ type: type, page: 1 });
				if (res.code == 1) {
					this.orderList = res.data;
				}
				console.log(this.orderList);
			}
		},
		drawback(item){
			console.log(item);
			let item1=JSON.stringify(item)
			uni.navigateTo({
				url:`/pages/order/afterSales?id=`+item1
			})
		}
	}
};
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.big {
	padding: 0 32rpx;
	.u-tabs {
		border-bottom: 2rpx solid #eeeeee;
	}
	.hiatus {
		width: 100%;
		margin-top: 292rpx;
		text-align: center;
		.img {
			width: 100%;
			height: 486rpx;
			position: relative;
			image {
				width: 100%;
				height: 100%;
			}
			text {
				// width: 196rpx;
				height: 42rpx;
				font-size: 28rpx;
				font-family: Source Han Sans SC-Regular, Source Han Sans SC;
				font-weight: 400;
				color: #aaaaaa;
				line-height: 33rpx;
				position: absolute;
				top: 440rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}
		}
		.button {
			width: 352rpx;
			height: 96rpx;
			background: #001b0a;
			border-radius: 52rpx 52rpx 52rpx 52rpx;
			font-size: 32rpx;
			font-family: Source Han Sans SC-Bold, Source Han Sans SC;
			font-weight: bold;
			color: #ffffff;
			line-height: 96rpx;
			text-align: center;
			margin-left: 50%;
			transform: translate(-50%, 0);
			margin-top: 142rpx;
		}
	}
}
</style>
